<!--<template>
    <div>
        <div class="scrollerTop">
            
            <div class="vip-search">
                <input type="text" placeholder="输入搜索内容..." v-model="searchText">
                <i @click="search"></i>
            </div>
            <div class="common-form">
                <div class="vip-list-ranking" @click="goodsSort"><a>综合排名<em></em><em></em></a></div>
                <div class="vip-list-sales" @click="hasSold"><a>销量<em></em><em></em></a></div>
                <div class="vip-list-price" @click="price"><a>价格<em></em><em></em></a></div>
            </div>
        </div>
		<div class="shop">
            <scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
                <div class="shop-goods" v-for="item in List">
                    <router-link  :to="{path:'/VipDetail/'+ item.id}">
                        <img :src="item.thumbnail" />
                        <div class="shop-goods-info">
                            <p>{{item.goods_title}}</p>
                            <p>价格：￥{{item.market_price}}</p>
                            <p>会员价：<em>￥<i>{{item.price}}</i> </em></p>
                        </div>
                    </router-link>
                </div>
            </scroller>
		</div>
    </div>
</template>

<script>
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
    export default {
        name:'VipList',
        data () {
            return {
                List:[],
                searchText:'',
                url:'http://api.huiwanzhong365.com',
                ranking1:0,
                ranking2:0,
                ranking3:0,
                page:1
            }
        },
        methods:{
             //下拉刷新
            refresh:function(done){
                console.log('refresh')
                this.Slist.length = 0
                this.page = 1
                this.$refs.scrollerBottom.finishInfinite(false)
                this.getList(this.page, done);
            },
            //上拉加载
            infinite(done){
                console.log('infinite')
                this.getList(this.page, done);
            },
            //搜索商品列表
            getList:function(page, done){
                var that = this
                var uo = url.parse(window.location.href, true)

                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_type:0,
                    goods_title:that.$route.query.search,
                }
                that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    for (var i in res.data.data) {
                        res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
                    }
                    if(res.data.data.length == 0) {
                        that.$refs.scrollerBottom.finishInfinite(true)
                        return false
                    }
                    // this.List = res.data.data;
                    that.List.push(...res.data.data);
                    that.page++
                    done()
                }).catch(err=>{
                    console.log(err)
                    done()  
                })
            },
            search:function(){

            },
            // 综合排名
            goodsSort:function(){
                var that = this
                var uo = url.parse(window.location.href, true)

                var openid = localStorage.getItem("openid")
                if(this.ranking1 == 0){
                    var draw = { 
                        openid:openid,
                        goods_type:0,
                        goods_title:that.$route.query.search,
                        goods_sort:1,
                    }
                    that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                        console.log(res.data)
                        for (var i in res.data.data) {
                            res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
                        }
                        this.List = res.data.data;
                        this.ranking1 = 1
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    var draw = { 
                        openid:openid,
                        goods_type:0,
                        goods_title:that.$route.query.search,
                        goods_sort:0,
                    }
                    that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                        console.log(res.data)
                        for (var i in res.data.data) {
                            res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
                        }
                        this.List = res.data.data;
                        this.ranking1 = 0
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                
            },
            // 价格排名
            price:function(){

            },
            // 销量排名
            hasSold:function(){
                var that = this
                var uo = url.parse(window.location.href, true)

                var openid = localStorage.getItem("openid")
                if(this.ranking2 == 0){
                    var draw = { 
                        openid:openid,
                        goods_type:0,
                        goods_title:that.$route.query.search,
                        has_sold:1,
                    }
                    that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                        console.log(res.data)
                        for (var i in res.data.data) {
                            res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
                        }
                        this.List = res.data.data;
                        this.ranking2 = 1
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    var draw = { 
                        openid:openid,
                        goods_type:0,
                        goods_title:that.$route.query.search,
                        has_sold:0,
                    }
                    that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                        console.log(res.data)
                        for (var i in res.data.data) {
                            res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
                        }
                        this.List = res.data.data;
                        this.ranking2 = 0
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>

<style scoped>
.shop{
    position: relative;
    height: 96%;
    margin-top:114px;
}
.scrollerTop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #F9F9F9;
    width: 100%;
}
.vip-search{
	width:94%;
	margin:15px auto;
	background: #DFB87D;
    border-radius: 20px;
    overflow: hidden;
}
.vip-search input{
    padding: 8px 16px;
    width: 76%;
    background: transparent;
    border: 0;
    color: #FFF;
}
.vip-search i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 8px;
    float: right;
    margin-right: 15px;
}
input::-webkit-input-placeholder{
    color:#FFF;
}
</style>-->
<template>
    <div style="width: 100%; height: 100%;">
        <div class="scrollerTop">
            <div class="vip-search">
                <input type="text" placeholder="输入搜索内容..." v-model="searchText">
                <i @click="search"></i>
            </div>
            <div class="common-form">
                <div class="vip-list-ranking" @click="sort"><a>综合排名<em></em><em></em></a></div>
                <div class="vip-list-sales" @click="has"><a>销量<em></em><em></em></a></div>
                <div class="vip-list-price" @click="price"><a>价格<em></em><em></em></a></div>
            </div>
        </div>
        <div class="shop">
            <scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
                <div class="shop-goods" v-for="(item,index) in shop" :key="index">
                    <router-link  :to="{path:'/VipDetail/'+ item.id}">
                        <img :src="url + item.thumbnail" />
                        <div class="shop-goods-info">
                            <p>{{item.goods_title}}</p>
                            <p>价格：￥{{item.market_price}}</p>
                            <p>会员价：<em>￥<i>{{item.price}}</i> </em></p>
                        </div>
                    </router-link>
                </div>
                <div class="clearfix"></div>
            </scroller>
        </div>
    </div>
</template> 

<script>
import url from 'url'
import qs from 'qs'
import wx from 'weixin-jsapi'
export default {
    name: 'VipClassifyList',
    data () {
        return {
            getOne:[],//一级菜单
            n: 0,
            shop:[],
            // page:1,
            categoryTd:1,
            List:[],
            searchText:'',
            url:'http://api.huiwanzhong365.com',
            ranking1:0,
            ranking2:0,
            ranking3:0,
            page:1,
            goodsSort:'',
            hasSold:'',
            price_sort:'',
            // list:[1,2,3,4,5,6,7,8,9,0]
        }
    },
    methods:{
        //下拉刷新
        refresh:function(done){
            console.log('refresh')
            this.shop.length = 0
            this.page = 1
            this.$refs.scrollerBottom.finishInfinite(true)
            this.getDataList(this.page, done,this.goodsSort,this.hasSold,this.price_sort)
            
            // finishInfinite(isNoMoreData :Boolean)
        },
        //上拉加载
        infinite(done){
            console.log('infinite')
            this.getDataList(this.page, done,this.goodsSort,this.hasSold,this.price_sort);
        },
        search:function(){
            this.shop.length = 0
        },
        //会员商品列表
        getDataList(page, done,goodsSort,hasSold,price_sort){
            var that = this
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            console.log(hasSold)
           var draw = { 
                openid:openid,
                goods_type:1,
                goods_title:that.$route.query.search,
                page:this.page,
                goods_sort:goodsSort,
                has_sold:hasSold,
                price:price_sort
            }
            that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
                console.log(res.data.data)
                if(res.data.data.length == 0) {
                    that.$refs.scrollerBottom.finishInfinite(true)
                    return false
                }
                that.shop.push(...res.data.data);
                that.page++
                done && done()
            }).catch(err=>{
                console.log(err)
                done && done()
            })
        },
        switchTo(path){
            // console.log(this.$router)
            this.$router.push(path)
        },

        // 综合排名
        sort:function(){
            var that = this
            // var uo = url.parse(window.location.href, true)goodsSort,hasSold,price_sort
            this.shop.length = 0
            switch(this.ranking1)
            {
                case 0:
                    this.goodsSort = 1
                    this.ranking1 = 1
                    this.hasSold = 100
                    this.price_sort = 100
                break;
                case 1:
                    this.goodsSort = 0
                    this.ranking1 = 0
                    this.hasSold = 100
                    this.price_sort = 100
                break;
            }
            this.$refs.scrollerBottom.triggerPullToRefresh()
            // var openid = localStorage.getItem("openid")
            // if(this.ranking1 == 0){
            //     var draw = { 
            //         openid:openid,
            //         goods_type:0,
            //         goods_title:that.$route.query.search,
            //         goods_sort:1,
            //     }
            //     that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
            //         console.log(res.data)
            //         for (var i in res.data.data) {
            //             res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
            //         }
            //         this.shop = res.data.data;
            //         this.ranking1 = 1
            //     }).catch(err=>{
            //         console.log(err)
            //     })
            // }else{
            //     var draw = { 
            //         openid:openid,
            //         goods_type:0,
            //         goods_title:that.$route.query.search,
            //         goods_sort:0,
            //     }
            //     that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
            //         console.log(res.data)
            //         for (var i in res.data.data) {
            //             res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
            //         }
            //         this.shop = res.data.data;
            //         this.ranking1 = 0
            //     }).catch(err=>{
            //         console.log(err)
            //     })
            // }
            
        },
        // 价格排名
        price:function(){
            var that = this
            // var uo = url.parse(window.location.href, true)goodsSort,hasSold,price_sort
            this.shop.length = 0
            switch(this.ranking3)
            {
                case 0:
                    this.price_sort = 1
                    this.ranking3 = 1
                    this.goodsSort = 100
                    this.hasSold = 100
                break;
                case 1:
                    this.price_sort = 0
                    this.ranking3 = 0
                    this.goodsSort = 100
                    this.hasSold = 100
                break;
            }
            this.$refs.scrollerBottom.triggerPullToRefresh()
        },
        // 销量排名
        has:function(){
            var that = this
            // var uo = url.parse(window.location.href, true)goodsSort,hasSold,price_sort
            this.shop.length = 0
            switch(this.ranking2)
            {
                case 0:
                    this.hasSold = 1
                    this.ranking2 = 1
                    this.goodsSort = 100
                    this.price_sort = 100
                break;
                case 1:
                    this.hasSold = 0
                    this.ranking2 = 0
                    this.goodsSort = 100
                    this.price_sort = 100
                break;
            }
            this.$refs.scrollerBottom.triggerPullToRefresh()
            // var openid = localStorage.getItem("openid")
            // if(this.ranking2 == 0){
            //     var draw = { 
            //         openid:openid,
            //         goods_type:0,
            //         goods_title:that.$route.query.search,
            //         has_sold:1,
            //     }
            //     that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
            //         console.log(res.data)
            //         for (var i in res.data.data) {
            //             res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
            //         }
            //         this.shop = res.data.data;
            //         this.ranking2 = 1
            //     }).catch(err=>{
            //         console.log(err)
            //     })
            // }else{
            //     var draw = { 
            //         openid:openid,
            //         goods_type:0,
            //         goods_title:that.$route.query.search,
            //         has_sold:0,
            //     }
            //     that.$http.post('/vipmember/index/getList',qs.stringify(draw)).then(res=>{
            //         console.log(res.data)
            //         for (var i in res.data.data) {
            //             res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
            //         }
            //         this.shop = res.data.data;
            //         this.ranking2 = 0
            //     }).catch(err=>{
            //         console.log(err)
            //     })
            // }
        }
    },
    mounted(){
      
    }
}
</script>

<style scoped>
.shop{
    position: relative;
    height: 96%;
    margin-top: 114px;
}
.clearfix{
    clear: both;
}
.scrollerTop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #FFF;
    width: 100%;
}

/* #outer-q41uw{
    width: 100%;
    height: 460px;
}
._v-container{
    position: inherit;
} */

.vip-search{
	width:94%;
	margin:15px auto;
	background: #FC2847;
    border-radius: 20px;
    overflow: hidden;
}
.vip-search input{
    padding: 8px 16px;
    width: 76%;
    background: transparent;
    border: 0;
    color: #FFF;
}
.vip-search i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 8px;
    float: right;
    margin-right: 15px;
}
input::-webkit-input-placeholder{
    color:#FFF;
}
.list{
    width:100%;
    height:100px;
    line-height: 100px;
    text-align: center
}
.team-list-ul a{
    position: relative;
}
.active{
    color:#FE2746 !important;
    font-weight: 600;
    background-color: #FFF !important;
}
.active i {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
}
.team-list{
	width: 100%;
    height: 38px;
    display: inline-block;
    overflow: auto;
}
.team-list-ul{
	width:1000px;
}
.team-list-ul a{
    width: 82px;
    text-align: center;
    display: inline-block;
    float: left;
    padding: 7px 0;
    color: #999;
}
.team-list-ul-pink{
	color:#FE2746 !important;
	position: relative;
}
.team-list-ul-pink i{
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
}
.vip-list a{
    color:#999;
    float: left;
}
.vip-search{
	width:94%;
	margin:0 auto;
	background: #FC2847;
	border-radius: 20px;
    margin-top: 15px;
}
.vip-search div{
	color:#FFF;
	margin-top:15px;
    padding:8px 16px;
    margin-bottom: 15px;
}
.vip-search div i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
}
</style>